<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script>
        Vue.config.productionTip = false;
        /*
        创建组件的时候，可以直接省略Vue.extend方法，直接书写配置对象就行
        在组件被注册的时候，如果发现当前的组件时一个对象，那么注册的时候，就会帮我们拿这个配置对象去创建一个组件
        */ 
        const Count =Vue.extend({
            name:"Count",
            data(){
                return{
                    count:1,
                };
            },
           // 写一个模板这里要写一个父组件，否则会报错
            template:`
                <div>
                    <h1>{{count}}</h1>
                    <button @click="count++">助力加1</button>
                </div>
            `,

        });
        const Person=Vue.extend({
            name:"Person",
            data() {
                return {
                   name:"小文",
                   age:18,
                };
            },
            template:"<span>有话讲一半</span>",
        });
        /*
         使用Vue.extend方法返回一个VueComponent构造函数
         当组件使用的时候，会把当前的VueComponent实例化，得到一个组件实例
        
        注意：
            1.每次创建一个组件，都会得到一个不同的VueComponent构造函数
         */ 

        const vm = new Vue({
            el: '#app',
            components:{
                Count:Count,
            },
            //  <Count/>这个是按钮的意思
            template:`
                <div>
                    <Count/>    
                    <Count/>    
                    <Count/>    
                </div>
            `,
        })
    </script>
</body>

</html>